Skip to content

fix: Verification email showing raw HTML code#192

Merged
roncodes merged 2 commits intodev-v1.6.36from
fix/verification-email-html-rendering
Feb 24, 2026
Merged

fix: Verification email showing raw HTML code#192
roncodes merged 2 commits intodev-v1.6.36from
fix/verification-email-html-rendering

Conversation

@roncodes
Copy link
Member

Problem

Users were seeing raw HTML code in verification emails instead of a properly rendered button:

<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation">

This has been a persistent issue affecting user experience during registration.

Root Cause

The template used a custom <x-mail-layout> component with nested @component('mail::button'), but:

  • Custom layout component doesn't support Laravel markdown mail components
  • @component('mail::button') requires @component('mail::message') wrapper
  • Laravel's markdown renderer couldn't process the button component properly
  • Result: Raw HTML table code was displayed instead of being rendered

Solution

  • ✅ Replaced custom <x-mail-layout> with standard @component('mail::message')
  • ✅ Properly wrapped button component inside message component
  • ✅ Used markdown syntax for text formatting
  • ✅ Removed incompatible custom layout

Changes

Before:

<x-mail-layout>
    Welcome to Fleetbase...
    @component('mail::button', [...])
        Verify Email
    @endcomponent
</x-mail-layout>

After:

@component('mail::message')
# Good Morning!

Welcome to Fleetbase...

**Your verification code:** \`766619\`

@component('mail::button', [...])
Verify Email
@endcomponent
@endcomponent

Result

✅ Button renders correctly as styled HTML button
✅ No raw HTML code visible
✅ Proper markdown mail formatting
✅ Compatible with Laravel 10+ mail system
✅ Fixes long-standing user complaint

Testing

  • Send verification email
  • Verify button displays correctly (not raw HTML)
  • Verify code is properly formatted
  • Test in Gmail, Outlook, Apple Mail
  • Verify custom content still works when provided

Issue:
- Verification email was displaying raw HTML table code instead of rendered button
- Users saw: <table class="action" align="center"...> in the email body
- Caused by incorrect markdown mail template structure

Root Cause:
- Template used @component('mail::button') without @component('mail::message') wrapper
- Custom <x-mail-layout> component doesn't support nested markdown components
- Laravel markdown renderer couldn't process the button component properly

Solution:
- Replaced custom <x-mail-layout> with standard @component('mail::message')
- Properly wrapped @component('mail::button') inside message component
- Used markdown syntax for formatting (**, `code`, etc.)
- Removed custom layout that was incompatible with markdown components

Before:
<x-mail-layout>
    ...
    @component('mail::button', [...])
    @endcomponent
</x-mail-layout>

After:
@component('mail::message')
    ...
    @component('mail::button', [...])
    @endcomponent
@endcomponent

Result:
✅ Button renders correctly as HTML button
✅ No raw HTML code visible in email
✅ Proper markdown mail formatting
✅ Works with Laravel 10+ mail system
@roncodes roncodes changed the base branch from main to dev-v1.6.36 February 24, 2026 08:46
…ibility

Root Cause:
- VerificationMail used Laravel 10+ Content::markdown() syntax
- This processes markdown templates differently than old build()->markdown()
- The new Content API doesn't properly render @component('mail::button') inside custom layouts
- CompanyRegistered (working) uses old build()->markdown() syntax

Solution:
- Changed VerificationMail from content() method to build() method
- Now uses same syntax as CompanyRegistered and other working emails
- Keeps original x-mail-layout template with branding
- Button component now renders correctly

Changes:
1. VerificationMail.php: Replaced envelope()/content() with build()
2. verification.blade.php: Restored original template (no changes needed)

The issue wasn't the template - it was how the Mail class configured markdown processing!
@roncodes roncodes merged commit ba8781d into dev-v1.6.36 Feb 24, 2026
@roncodes roncodes deleted the fix/verification-email-html-rendering branch February 24, 2026 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant